<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>026-CSS中常用的长度单位</title>
		<style>
			html {
				font-size: 40px;
			}

			/* px 像素 */
			.d1 {
				width: 200px;
				height: 200px;
				font-size: 20px;
				background-color: skyblue;
			}

			/* em 相对于当前元素或其父元素的font-size，如果都不存在则默认为浏览器的font-size（16px） */
			.d2 {
				width: 10em;
				height: 10em;
				font-size: 20px;
				background-color: pink;
			}

			/* rem 相对于根元素(html)的font-size，如果都不存在则默认为浏览器的font-size（16px） */
			.d3 {
				width: 5rem;
				height: 5rem;
				font-size: 20px;
				background-color: yellowgreen;
			}

			/* % 相对于父元素的百分比 */
			.d4 {
				width: 200px;
				height: 200px;
				font-size: 20px;
				background-color: gray;
			}

			.inside {
				width: 50%;
				height: 25%;
				font-size: 150%;
				background-color: orange;
			}

			/* 动态设置文字缩进案例 */
			.test {
				font-size: 40px;
				text-indent: 2em; /* 首行缩进2个字符，em根据文字太小动态计算 */
				background-color: yellowgreen;
			}
		</style>
	</head>
	<body>
		<div class="d1">1</div>
		<hr />
		<div class="d2">2</div>
		<hr />
		<div class="d3">3</div>
		<hr />
		<div class="d4">
			<div class="inside">4</div>
		</div>
		<hr />
		<div class="test">好好学习，天天向上</div>
	</body>
</html>
